<template>
  <div class="center" style="padding-bottom:50px">
    <div class="ruok-mine">
      <!-- 背景 -->
      <div class="header-bg">
        <div class="userInfo">
          <div class="portrait-box">
            <div class="portrait-face" style="background-image: url(&quot;https://api.dk38dj27.info/assets/user_icon.png&quot;);"></div>
            <input class="avatarSlect" type="file">
          </div>
          <div class="main">
            <div class="user-info" v-show="usernamex">
              <div class="user-info-item">
                <i class="user-info-icon-name"></i>
                <div class="user-info-text-name">昵称：{{usernamex}}</div>
              </div>
              <div class="user-info-item">
                <i class="user-info-icon-place"></i>
                <div class="user-info-text-name">账号：{{usernamex}}</div>
              </div>
              <div class="user-info-item">
                <i class="user-info-icon-money"></i>
                <span class="user-info-text-money">￥{{userInfo.money}}</span>
                <i class="user-info-icon-remoney" @click="remoney"></i>
              </div>
            </div>
            <div v-if="!usernamex">
              <i class="login" @click="intoLogin">登录/注册</i>
            </div>
            <div class="pay" :class="{waitLogin: !usernamex}">
              <a @click="investMoney"><i class="icon-into"></i>充值</a>
              <a @click="withdrawal" to="/centre/withdrawals"><i class="icon-outo"></i>提现</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="centre-nav-warp">
        <a v-for="(item,index) in notes" :key="index" @click="noteClick(index)">
          <img class="icon-notes" :src="item.src" />{{item.title}}
        </a>
      </div>
      <!-- 列表 -->
      <div class="centre-more">
        <div class="centre-more-warp">
          <a v-for="(item,index) in myList"
          @click='listClick(index)'
          :key="index"
          class="centre-item"
          :class="{listBottom: item.margin}">
            <img :src="item.src" alt="" class="icon icon-hb" v-if="item.title">
            {{item.title}}
            <span class="centre-item-extra" v-if="item.perNumber">{{item.perNumber}}</span>
          </a>
        </div>
      </div>
    </div>
  <tabbar />
  </div>
</template>

<script>
import Tabbar from 'components/Tabbar'
import { mapState } from 'vuex'
export default {
  name: 'personal',
  components: {
    Tabbar
  },
  data () {
    return {
      userInfo: {
        money: '0.00'
      },
      notes: [
        { title: '投注记录', src: require('../../assets/images/icon/note1.png') },
        { title: '账户明细', src: require('../../assets/images/icon/note2.png') },
        { title: '充值记录', src: require('../../assets/images/icon/note3.png') },
        { title: '提现记录', src: require('../../assets/images/icon/note4.png') }
      ],
      myList: [
        { title: '我的红包', src: require('../../assets/images/icon/mylist1.png') },
        { title: '彩票规则', src: require('../../assets/images/icon/mylist2.png') },
        { title: '我的收藏', src: require('../../assets/images/icon/mylist3.png') },
        { title: '我的推广', perNumber: '已推荐12人', src: require('../../assets/images/icon/mylist4.png') },
        { margin: true },
        { title: '活动中心', perNumber: '参与1个活动', src: require('../../assets/images/icon/mylist5.png') },
        { title: '信息公告', src: require('../../assets/images/icon/mylist6.png') },
        { title: '在线咨询', src: require('../../assets/images/icon/mylist7.png') },
        { margin: true },
        { title: '设置', src: require('../../assets/images/icon/mylist8.png') }
      ]
    }
  },
  computed: {
    // 获取用户名
    ...mapState({
      usernamex: state => state.state.usernamex
    })
  },
  mounted () {
  },
  methods: {
    remoney () {
      this.$toast({
        type: 'success',
        message: '余额刷新成功',
        duration: 2000
      })
    },
    intoLogin () {
      this.$router.push({ name: 'login' })
    },
    investMoney () {
      this.$router.push({ name: 'investMoney' })
    },
    withdrawal () {
      this.$router.push({ name: 'fundPassword' })
    },
    noteClick (type) {
      let routeName = ['bettingRecord', 'accountDetail', 'rechargeRecord', 'withdrawalRecord']
      this.$router.push({ name: routeName[type] })
    },
    listClick (index) {
      let routeName = ['myGift', 'rules', 'myCollect', 'myPopularize',
        '', '', 'infoBulletin', '', '', 'setting']
      this.$router.push({ name: routeName[index] })
    }
  },
  created () {}
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
.center{
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
.center .ruok-mine {
  -ms-flex: 1 1;
  flex: 1 1;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.header-bg{
    position: relative;
    width: 100%;
    height: 214px;
    background: url("~images/logo/userInfobg.jpg") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    background-color: #f00;
}
.header-bg .userInfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 42px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 32px;
    .portrait-box{
      border-radius: 100px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
      width: 92px;
      height: 92px;
      background: hsla(0,0%,100%,.4);
    }
}
.header-bg .userInfo .portrait-box .portrait-face {
    width: 90%;
    height: 90%;
    padding: 16px;
    background-position: 50%;
    background-size: contain;
    border-radius: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.header-bg .userInfo .portrait-box .avatarSlect {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 96px;
    height: 96px;
    border-radius: 100px;
    opacity: 0;
}
.header-bg .userInfo .main {
    -ms-flex: 1 1;
    flex: 1 1;
    margin-left: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}
.header-bg .userInfo .main .user-info {
    color: #fff;
}
.header-bg .userInfo .main .user-info .user-info-item {
    height: 28px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-icon-name{
    background: url() no-repeat;
    background-size: auto 100%;
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-text-name {
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-icon-place {
    width: 16px;
    margin-right: 8px;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-text-name {
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-icon-mone{
    background-size: auto 100%;
    width: 16px;
    height: 16px;
    white-space: nowrap;
    margin-right: 8px;
    background:url() no-repeat
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-icon-money {
    background: url() no-repeat;
    background-size: auto 100%;
    width: 16px;
    height: 16px;
    white-space: nowrap;
    margin-right: 8px;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-text-money {
    font-size: 20px;
}
.header-bg .userInfo .main .user-info .user-info-item .user-info-icon-remoney {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 100px;
    margin-left: 8px;
    background:#fff url() 50% no-repeat;
    background-size: auto 90%;
    width: 20px;
    height: 20px;
}
.header-bg .userInfo .main .pay {
    position: absolute;
    margin-top: 12px;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}.header-bg .userInfo .main .pay a {
    width: 92px;
    height: 34px;
    line-height: 39px;
    background: hsla(0,0%,100%,.7);
    border-radius: 39px;
    color: #661dac;
    font-size: 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
.header-bg .userInfo .main .pay .icon-into {
    width: 22px;
    height: 17px;
    background: url() no-repeat;
    background-position: 50%;
    background-size: 100%;
}.header-bg .userInfo .main .pay .icon-outo {
    width: 22px;
    height: 17px;
    background: url() no-repeat;
    background-position: 50%;
    background-size: 100%;
}
.header-bg .userInfo .main .pay a:last-child {
    margin-left: 30px;
}
.header-bg .userInfo .main .pay i {
    display: block;
    margin-right: 4px;
}
.centre-nav-warp {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 75px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: center;
    align-content: center;
    font-size: 15px;
    margin-bottom: 11px;
    background-color: #fff;
}
.centre-nav-warp a {
    -ms-flex: 1 1;
    flex: 1 1;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #3f3f3f;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
}
.centre-nav-warp .icon-notes {
    width: 41px;
    height: 41px;
    background: url() no-repeat;
    background-position: 50%;
    background-size: 100%;
}
.centre-more {
    margin: 11px 0;
}
.centre-more-warp {
    width: 100%;
    margin-top: 12px;
    font-size: 14px;
    background-color: #fff;
}
.centre-more-warp .centre-item {
    color: #3f3f3f;
    position: relative;
    height: 48px;
    border-bottom: 1px solid #efefef;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 20px;
}
.centre-more-warp .centre-item .icon-hb {
    width: 26px;
    height: 24px;
    background-position: 50%;
    background-size: contain;
    margin-right: 12px;
}
.centre-more-warp .centre-item .centre-item-extra {
    -ms-flex: 1 1;
    flex: 1 1;
    text-align: right;
    color: #989898;
    padding-right: 12px;
}
.centre-more-warp .listBottom{
  height:12px;
  background-color: #f5f5f9
}
.header-bg .userInfo .main .login {
    margin-left: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
}
.header-bg .userInfo .main .pay.waitLogin {
    bottom: -100px;
}
</style>
